<template>
  <div class="axios-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例(建议打开控制台在Console和Network中进行请求信息查看)</label>
      <div class="example">
        <h5>四种请求方式示例</h5>
        <div>
          <el-button size="mini" type="primary"  @click="getTest">get请求</el-button>
          <el-button size="mini" type="primary"  @click="putTest">put请求</el-button>
          <el-button size="mini" type="primary"  @click="postTest">post请求</el-button>
          <el-button size="mini" type="primary"  @click="deleteTest">delete请求</el-button>
        </div>
        <h5>请求返回结果</h5>
        <div class="code-view">
          <pre>
          {{code}}
        </pre>
        </div>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入参数</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in props" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'AxiosDemo',
    data() {
      return {
        urls:{
          testUrl: remoteUrl + '/demo/test/spring',
        },
        code:null,
        props:[
          {name: 'type', desc: '默认值："get"。请求类型，默认只有四种，大小写均可。'},
          {name: 'url', desc: '默认值：null。请求数据的接口url。'},
          {name: 'param', desc: '默认值：{}。请求后台的参数 requestBody；如果参数是requestParameter，则可以追加在url后，也可以放在options里{params:HttpParams}。'},
          {name: 'configOptions', desc: '默认值：{}。默认配置项，默认参数如下。',
            lists: [
              {name: 'options', desc: '默认{withCredentials: true}，发送给后台时携带cookie或者设置headers，或者传参数采用requestParameter'},
              {name: 'fullSuccess', desc: '默认：false.是否成功的回调函数全部自己定义，如果为true则直接将response.data(后台返回数据在response.data中)放置到resolve中；如果为false，则提示消息全使用此函数默认提示方式，会将response.data[dataKey]放置到resolve中。'},
              {name: 'ignoreEmptyData', desc: '默认：false，是否忽略显示数据为空时的提示，默认是提示数据为空的，如果hideEmptyTip设置为true，则不提示。'},
              {name: 'showEmptyInfo', desc: '默认：false，数据为空时，数据为空时，是否使用后台返回的消息进行消息提示。'},
              {name: 'emptyDataInfo', desc: '默认：null，数据为空时的提示信息，ignoreEmptyData和hideSuccessTip为false、null、undefined时，可提示自定义的数据为空的提示信息'},
              {name: 'hideEmptyTip', desc: '默认：false，是否显示数据为空的消息提示，默认显示消息提示。'},
              {name: 'hideSuccessTip', desc: '默认：false，是否显示请求成功的提示，默认显示提示信息。'},
              {name: 'useDesc', desc: '默认：false，是否启用后台返回的desc字段作为提示信息。'},
              {name: 'hideErrorTip', desc: '默认：false，是否显示请求错误的提示，默认显示提示信息'},
              {name: 'redirectUrl', desc: '默认："/login"，报403或者401错误时，重定向页面的路由'},
              {name: 'messageKey', desc: '默认："message"，后台放置提示消息的字段'},
              {name: 'dataKey', desc: '默认："value"，后台放置前台需求数据的字段'}
            ]},
        ]
      }
    },

    mounted() {

    },
    methods: {
      getTest(){
        this.httpRequest('get', this.urls.testUrl, {},{fullSuccess:true} ).then(res => {
          this.message(this,'success',res.message);
          console.log('get response', res);
          this.code = res;
        }).catch(err => {
          console.log('fail error', err);
          this.code = err;
        });
      },
      putTest(){
        this.httpRequest('put', this.urls.testUrl, {age:0,name:'Tom',tel:15236547865},{fullSuccess:true} ).then(res => {
          this.message(this,'success',res.message);
          console.log('put response', res);
          this.code = res;
        }).catch(err => {
          console.log('fail error', err);
          this.code = err;
        });
      },
      postTest(){
        this.httpRequest('post', this.urls.testUrl, {age:0,name:'Tom',tel:15236547865},{fullSuccess:true} ).then(res => {
          this.message(this,'success',res.message);
          console.log('post response', res);
          this.code = res;
        }).catch(err => {
          console.log('fail error', err);
          this.code = err;
        });
      },
      deleteTest(){
        let requestParameter = 'testid'; //请求参数
        this.httpRequest('delete', this.urls.testUrl+'/'+requestParameter, {},{fullSuccess:true} ).then(res => {
          this.message(this,'success',res.message);
          console.log('delete response', res);
          this.code = res;
        }).catch(err => {
          console.log('fail error', err);
          this.code = err;
        });
      }
    },
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .axios-demo-wrapper{
    width:100%;
    height:100%;
    .code-view{
      margin:10px 0;
      background: #2F3541;
      height:400px;
      pre{
        color:#f6f6f6;
      }
    }
  }

</style>
